<template>
	<view class="content">
		<view class="main">
			<view class="header">
				<view class="title">
					<u-icon name="arrow-left" color="#FFFFFF" size="36" @tap="nextPage(`/pages/login/login?type=big`)"></u-icon>
					<text>提交证件资料</text>
				</view>
			</view>
			<view class="person">
				<view class="personTiltle">
					<text>个人信息</text>
				</view>
				<view class="name">
					<text class="light">姓名：</text>
					<input type="text"  placeholder="张三"
					placeholder-style="{
						width: 350px;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #323233;
					}"
					value="" />
				</view>
				<view class="address">
					<text class="light">联系电话：</text>
					<input type="text"  placeholder="12345678901"
					placeholder-style="{
						width: 350px;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #323233;
					}"
					value="" />
				</view>
			</view>
			<view class="certificate">
				<view class="certificateTiltle">
					<text>身份证件</text>
				</view>
				<view class="card">
					<view class="photo">
						<view class="photoList">
							<image src="/static/login/add.png" mode=""></image>
							<text>身份证正面照片</text>
						</view>
						<view class="photoList">
							<image src="/static/login/add.png" mode=""></image>
							<text>身份证正面照片</text>
						</view>
					</view>
				</view>
			</view>
			<view class="face">
				<view class="faceTiltle">
					<text>人脸识别</text>
				</view>
				<view class="faceMain">
					<image src="/static/login/face.png" mode=""></image>
				</view>
			</view>

			<view class="btn">
				<button type="default">开始人脸识别</button>
			</view>
		</view>
		<Tabbar :current="3"></Tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {

		}
	},
	methods: {
		nextPage(url) {
			uni.navigateTo({
				url: url,
				fail() {
					uni.switchTab({
						url: url,
						fail() {
							uni.showToast({
								title: '暂未开通，敬请期待！',
								icon: 'none'
							});
						}
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.content{
	padding-bottom: 200rpx;
	background: #F5F7FA;
	.main{
		height: 100vh;
		.header{
			background: linear-gradient(90deg, #52B8B2 0%, #5EC8A3 100%);
			.title{
				position: relative;
				width: 100%;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				.u-icon{
					position: absolute;
					height: 120rpx;
					left: 20rpx;
				}
				text{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
		.person{
			margin: 30rpx 30rpx 20rpx 30rpx;
			padding: 20rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 10rpx;
			.personTiltle{
				padding: 14rpx 0;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #323233;
			}
			.light{
				color: #646566;
			}
			.name{
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				padding-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #323233;
				border-bottom: #E6E6E6 1rpx solid;
			}
			.address{
				display: flex;
				align-items: center;
			}
		}
		.certificate{
			margin: 30rpx 30rpx 20rpx 30rpx;
			padding: 20rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 10rpx;
			.certificateTiltle{
				margin-bottom: 10rpx;
				padding: 14rpx 0;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #323233;
			}
			.card{
				margin-bottom: 10rpx;
				.photo{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 200rpx;
					border-radius: 10rpx;
					image{
						width: 54rpx;
						height: 54rpx;
					}
					.photoList{
						display: flex;
						flex-basis: 48%;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						height: 200rpx;
						background: #F9F9F9;
						border: 2rpx solid #EBEBEB;
						border-radius: 10rpx;
						text{
							margin-top: 20rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #4B4C4D;
						}
					}
				}
			}
		}
		.face{
			margin: 30rpx 30rpx 30rpx 30rpx;
			padding: 20rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 10rpx;
			.faceTiltle{
				margin-bottom: 10rpx;
				padding: 14rpx 0;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #323233;
			}
			.faceMain{
				text-align: center;
				image{
					width: 350rpx;
					height: 350rpx;
				}
			}
		}
		.btn{
			padding: 20rpx 40rpx;
			button{
				height: 76rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				background: #57BFAB;
				color: #FFFFFF;
				border-radius: 40rpx;
			}
		}
	}
}
</style>
